<template>
  <view class="indexContainer">
    <!-- 头部搜索 -->
    <view class="header">
      <view class="search">
        <image class="searchImg" src="../../static/images/tabBar/search.png"></image>
        <input class="ipt" type="text" placeholder="输入想要搜索的关键词" placeholder-class="place">
        <image class="letter" src="../../static/images/tabBar/letter.png" mode=""></image>
      </view>
    </view>
    
    <!-- 中国茶仓 -->
    <view class="teaHouse">
      <image class="teaImg" src="../../static/images/warehouse-white.png" mode=""></image>
      <text class="teaText">中国茶仓</text>
    </view>
    
    <!-- 企业采购直通车 -->
    <a class="carUrl" href="https://www.teasoo.com/wap/store/authent">
      <image style="width: 100%;height: 100%;" src="https://www.teasoo.com/public/Wap/images/index-ad1.png" mode=""></image>
    </a>
    
    <!-- 推荐商品 -->
    <view class="recommend">
      <view class="recommendTitle">
        <image class="recommendImg" src="../../static/images/recommend.png" mode=""></image>
        <text class="recommendText">推荐商品</text>
      </view>
      <view class="recommendList">
      	<view class="recommendItem" v-for="(recommend,index) in recommendData" :key="recommend.id" @click="toDetail(recommend.detail)">
      		<image class="itemImg" :src="recommend.cover"></image>
      		<text class="itemText">{{recommend.name}}</text>
      	</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
  export default {
    data() {
      return {
        
      };
    },
    methods:{
      getRecommendData () {
        this.$store.dispatch('home/getRecommendData')
      },
      toDetail(detail){
        uni.setStorageSync('detail',detail)
        uni.navigateTo({
          // url:'/pages/detail/detail'
          url:'/pages/detail/detail?detail=' + JSON.stringify(detail)
        })
      }
    },
    computed:{
      ...mapState('home',['recommendData'])
    },
    mounted(){
      this.getRecommendData()
    }
  }
</script>

<style lang="stylus" scoped>
.indexContainer
  height: 100%
  .header
    width: 100%
    height: 88upx
    background-color: green
    position: fixed
    left: 0
    top: 0
    .search
      display: flex
      .searchImg
        width: 28upx
        height: 28upx
        position: absolute
        top: 32upx
        left: 30upx
      .ipt
        display: flex
        width: 626upx
        height: 60upx
        background-color: #fff
        border-radius: 20upx
        margin: 16upx 0 0 14upx
        box-sizing: border-box
        font-size: 28upx
        padding-left: 50upx
      .letter
        width: 40upx
        height: 40upx
        position: absolute
        top: 24upx
        right: 40upx
  .teaHouse
    width: 100%
    height: 100upx
    background-color: #ddd
    margin-top: 130upx
    text-align: center
    line-height: 100upx
    .teaImg
      width: 34upx
      height: 34upx
      background-color: #000
      border-radius: 50%
      margin-right: 10upx
    .teaText
      font-weight: bold
      font-size: 32upx
  .carUrl
    display: block
    width: 100%
    height: 100upx
    background-color:#bfa
  .recommend
    width: 100%
    height: 100%
    background-color: #ddd
    .recommendTitle
      text-align: center
      height: 100upx
      line-height: 100upx
      .recommendImg
        width: 34upx
        height: 34upx
        background-color: #000
        border-radius: 50%
        margin-right: 10upx
      .recommendText
        font-weight: bold
        font-size: 32upx
    .recommendList
      display: flex
      flex-wrap: wrap
      .recommendItem
        width: 31%
        height: 392upx
        display: flex
        flex-direction: column
        align-items: center
        background-color: #fff
        margin: 14upx 0 0 14upx
        .itemImg
          width: 226upx
          height: 226upx
          margin: 20upx 0
        .itemText
          font-size: 28upx
          margin:20upx 10upx 0 20upx
</style>
